<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="乘客收费项" name="1">
        <el-form :rules="rules" ref="passengerForm" :model="passengerForm" label-width="100px" size="mini">
          <span class="titleText">以下为针对乘客行车费用的收费项（不包含附加费）</span>
          <el-form-item style="float: right;" size="mini">
            <el-button v-if="!toggle" type="primary" @click="passengerUpdate">修改</el-button>
            <el-button v-if="toggle" type="primary" @click="passengerSave('passengerForm')">保存</el-button>
          </el-form-item>
          <hr class="titleHr">
          <div class="formBody" style="margin-top: 20px">
            <div class="formBodyTitle">
              起步价
            </div>
            <div class="formBodyInput">
              <el-form-item label="起步公里数:" prop="startingKilometer">
                <el-input id="formInput" v-model="passengerForm.startingKilometer" :disabled="!toggle"
                          placeholder="请输入公里数"></el-input>
              </el-form-item>
              <el-form-item label="起步价:" prop="startingPrice">
                <el-input id="formInput" v-model="passengerForm.startingPrice" :disabled="!toggle"
                          placeholder="请输入金额"></el-input>
              </el-form-item>
              <span class="formInputText">
                （元，支持两位小数）
              </span>
            </div>
          </div>
          <div class="formBody">
            <div class="formBodyTitle">
              里程费
            </div>
            <div class="formBodyInput">
              <el-form-item label="每公里单价:" prop="mileageFee">
                <el-input id="formInput" v-model="passengerForm.mileageFee" :disabled="!toggle"
                          placeholder="请输入金额"></el-input>
              </el-form-item>
              <span class="formInputText">（超过起步公里后，每公里单价）</span>
            </div>
          </div>
          <hr class="titleHr">
          <div class="formBody" style="margin-top: 20px">
            <div class="formBodyTitle">
              出发点等待费
            </div>
            <div class="formBodyInput">
              <el-form-item label="免费等待时间:" prop="departureWaitingTime">
                <el-input id="formInput" v-model="passengerForm.departureWaitingTime" :disabled="!toggle"
                          placeholder="请输入分钟"></el-input>
              </el-form-item>
              <el-form-item label="每分钟单价:" prop="departureWaitingPrice">
                <el-input id="formInput" v-model="passengerForm.departureWaitingPrice" :disabled="!toggle"
                          placeholder="请输入金额"></el-input>
              </el-form-item>
              <span class="formInputText">
                （元，支持两位小数，超过免费等待时间后，每分钟单价）
              </span>
            </div>
          </div>
          <hr class="titleHr">
          <div class="formBody" style="margin-top: 20px">
            <div class="formBodyTitle">
              超时取消
            </div>
            <div class="formBodyInput">
              <el-form-item label="免费取消时间:" prop="timeoutCancellationTime">
                <el-input id="formInput" v-model="passengerForm.timeoutCancellationTime" :disabled="!toggle"
                          placeholder="请输入分钟"></el-input>
              </el-form-item>
              <el-form-item label="违约金:" prop="timeoutCancellationPrice">
                <el-input id="formInput" v-model="passengerForm.timeoutCancellationPrice" :disabled="!toggle"
                          placeholder="请输入金额"></el-input>
              </el-form-item>
              <span class="formInputText">
                （元，支持两位小数，超时取消后产生的固定违约金）
              </span>
            </div>
          </div>
          <div class="formBody" style="margin-top: 20px">
            <div class="formBodyTitle">
              接单后取消
            </div>
            <div class="formBodyInput">
              <el-form-item label="免费取消时间:" prop="orderCancellationTime">
                <el-input id="formInput" v-model="passengerForm.orderCancellationTime" :disabled="!toggle"
                          placeholder="请输入分钟"></el-input>
              </el-form-item>
              <el-form-item label="违约金:" prop="orderCancellationPrice">
                <el-input id="formInput" v-model="passengerForm.orderCancellationPrice" :disabled="!toggle"
                          placeholder="请输入金额"></el-input>
              </el-form-item>
              <span class="formInputText">
                （元，支持两位小数，司机接单取消后产生的固定违约金）
              </span>
            </div>
          </div>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="司机收费项" name="2">司机收费项</el-tab-pane>
      <el-tab-pane label="特殊系数" name="3">特殊系数</el-tab-pane>
      <el-tab-pane label="特殊日期" name="4">特殊日期</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeName: '1',
      // 乘客收费项
      passengerForm: {
        startingKilometer: '',
        startingPrice: '',
        mileageFee: '',
        departureWaitingTime: '',
        departureWaitingPrice: '',
        timeoutCancellationTime: '',
        timeoutCancellationPrice: '',
        orderCancellationTime: '',
        orderCancellationPrice: '',
      },
      // 显示隐藏
      toggle: false,
      rules: {
        startingKilometer: [
          {required: true, message: '请输入公里数', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数字', trigger: 'blur'},
        ],
        startingPrice: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数字', trigger: 'blur'},
        ],
        departureWaitingTime: [
          {required: true, message: '请输入分钟', trigger: 'blur'},
          {pattern: /^[+-]?\d+$/, message: '请输入整数', trigger: 'blur'},
        ],
        departureWaitingPrice: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数字', trigger: 'blur'},
        ],
        timeoutCancellationTime: [
          {required: true, message: '请输入分钟', trigger: 'blur'},
          {pattern: /^[+-]?\d+$/, message: '请输入整数', trigger: 'blur'},
        ],
        orderCancellationTime: [
          {required: true, message: '请输入分钟', trigger: 'blur'},
          {pattern: /^[+-]?\d+$/, message: '请输入整数', trigger: 'blur'},
        ],
        timeoutCancellationPrice: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数字', trigger: 'blur'},
        ],
        orderCancellationPrice: [
          {required: true, message: '请输入金额', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数字', trigger: 'blur'},
        ]
      }

    };
  },
  created() {
    axios.get(`http://localhost:10086/api-passenger/passenger/findById?id=${1}`).then(res => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        this.passengerForm = res.data.data;
        console.log(this.passengerForm)
      }
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    passengerUpdate() {
      this.toggle = true;
    },
    passengerSave(passengerForm) {
      console.log(this.passengerForm);
      this.checkInputType();
      this.$refs[passengerForm].validate((valid) => {
        if (valid) {
          console.log(this.passengerForm)
          this.checkInputType();
          axios.post('http://localhost:10086/api-passenger/passenger/save', this.passengerForm).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          })
          this.toggle = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    checkInputType() {
      console.log(typeof this.passengerForm.startingKilometer); // 应该输出 "number"
      console.log(typeof this.passengerForm.startingPrice); // 应该输出 "number"
      // 其他字段...
    },
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.titleText {
  color: red;
  font-weight: bold
}

.titleHr {
  border: 1px solid #e4e7ed;
  width: 100%;
}

#formInput {
  width: 150px;
  float: left;
}

.formBody {
  display: block;
  height: 60px;
}

.formBodyTitle {
  height: 28px;
  width: 100px;
  text-align: center;
  line-height: 28px;
  border: 1px solid black;
  display: inline-block;
  float: left;
}

.formBodyInput {
  float: left;
  display: flex;
  align-items: center;
}

.formInputText {
  margin-top: -30px;
}
</style>